.video {
  padding: 24px 30px;

  &__header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
  }

  &__popover {
    height: 500px;
    width: 720px;

    &-header {
      border-bottom: 1px solid #e5e5e5;
      display: flex;
      height: 56px;
      padding-left: 20px;
      padding-top: 12px;

      button {
        background-color: transparent;
        border: 0;
        border-radius: 15px;
        cursor: pointer;
        height: 30px;
        padding: 0 12px;

        &:hover {
          color: var(--primary-color);
        }
      }

      .--active {
        background-color: #fdf6f5;
        color: var(--primary-color);
      }
    }

    &-main {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      height: calc(100% - 57px);
      overflow: auto;
      padding-top: 12px;

      > div {
        height: 50px;
      }

      span {
        border-radius: 15px;
        cursor: pointer;
        display: inline-block;
        height: 30px;
        padding: 0 12px;

        &:hover {
          color: var(--primary-color);
        }
      }

      .--active {
        background-color: #fdf6f5;
        color: var(--primary-color);
      }
    }
  }

  &__footer {
    text-align: center;
  }
}
